<template>
	<SearchTable ref='tableRef' :search='searchConfig' :table='tableConfig' :control='controlsConfig'>
		<template v-slot:prefix='{ data }'>
			<div class='mr10'>自定义内容</div>
		</template>
	</SearchTable>
</template>

<script setup>
	const SearchTable 	= $.lazy(()=>import('#cpt/temp/SearchTable.vue'))
	import Ico_user		from '@img/login/user.png'
	import cols from '@views/_public/visitCols'
	/* ---------------------------  弹窗表单 --------------------------- */
	let tableRef = $ref()
	
	
	const tableModalConfig = {
		api:'submit',
		// infoApi: 'li',
		backData: ['vue'],
		modal:{
			title 	:'弹窗标题',
			width 	: '80%',
			height	: '80%',
			controls: {
				after: [
					{ mode:'ex'},
					{ label:'后置按钮' },
				],
				before: [
					{ label:'前置按钮', disabled:true }
				]
			},
			// onOk: param => {
			// 	console.log(param)
			// 	return false
			// },
			// onSubmit: param => {
			// 	console.log(param)
			// }
		},
		search:{
			data: [
				{ label:'名称', 	name:'name' }
			]
		},
		table:{
			api:'/list',
			idStr:'content',
			paging: 0,
			cols:[
				{ title: '名称', 	dataIndex: 'name' },
				{ title: '内容', 	dataIndex: 'content' },
				{ title: '菜单名称', dataIndex: 'title' },
			],
			data:[
				{ name:'Vue',  content:'vue' },
				{ name:'React', content:'react' },
				{ name:'Fluuter', content:'flutter' },
				{ name:'Java', content:'java' },
			],
			controls 	: {
				data: ({ name, content }) => {
					return [
						{ label:'下载', mode:'download'},
						{ mode:'delPop' },
					]
				}
			},
			row:{}
		},
	}
	/* ---------------------------  提交表单 --------------------------- */
	const controlsConfig = {
		title: '增删改查',
		refresh:true,
		controls	: [
			{ label:'下拉操作', mode:'dropdown',
				data: [
					{ mode:'add' },
					{ label:'删除', mode:'del', onSuccess:()=>{ } },
				]
			},
			{ mode:'add'},
			{ label:'表格弹窗', mode:'tableModal', config:tableModalConfig },
		]
	}
	/* ---------------------------  搜索表单 --------------------------- */
	const sData = [
		{ label:'vue', value:'1' },
		{ label:'react', value:'2' },
		{ label:'js', value:'3' },
		{ label:'html', value:'4' },
		{ label:'java', value:'5' },
		{ label:'nodejs', value:'6' },
	]
	const data = [
		{ label:'vue', value:'vue' },
		{ label:'react', value:'react' },
	]
	const searchConfig = {
		// param 		: { paramX:100, name:'123' },			// 搜索可变参数
		// query 		: { querY:200 },						// 搜索固定参数
		data: [
			{ label:'名称', 	name:'user_name', imgIcon: Ico_user },
			{ label:'内容', 	name:'content' },
			{ label:'类型', 	name:'type', type:'select' },
			{ label:'日期', 	name:'time', type:'date' },
			{ label:'日期范围', 	name:'date', type:'date-range', names:['start_time','end_time'], value:['2021-12-03', '2021-12-5'], format:1 },
			{ label:'类型1', name:'a', type:'select-more', data:$fn.copy(sData), value:'1', },
			{ label:'类型2', name:'b', type:'select-more', data:$fn.deepCopy(sData), value:'1', def:true },
		]
	}
	/* ---------------------------  新增、编辑 Modal --------------------------- */
	const addEditConfig = {
		title 		: '菜单',
		width 	: '40%',
		labelWidth 	: 's5',
		// addTitle 	: '添加',							// 自定义添加标题
		// modTitle 	: '编辑', 							// 自定义编辑标题
		data:[
			{ label:'Vue',  name:'title',	 r: ()=>addEditConfig.mod},
			{ label:'React', name:'content', disabled:()=>addEditConfig.mod  },
			{ label:'Select', name:'select', type:'select', data, value:'vue' },
			{ label:'文本', 	name:'select-content', 	type:'select-content', click:({ formRef })=>{
				const value = formRef.getValue('select-content')
				window.$tableModalRef().open({
					modal:{
						title 		:'弹窗标题',
						width 	: '80%',
						height : '80%',
						onSubmit 	: ({ keys, rows }) => {
							formRef.setValue({ 'select-content': keys.toString() })
							window.$tableModalRef().close()
						},
						onInit: ({ tableRef }) => {
							if(value){
								const keys = value.split(',')
								tableRef.setKeys( keys )
							}
						}
					}, 
					table:{
						idStr:'content',
						cols:[
							{ title: '名称', 	dataIndex: 'name' },
							{ title: '内容', 	dataIndex: 'content' },
							{ title: '菜单名称', dataIndex: 'title' },
						],
						data:[
							{ name:'Vue',  content:'vue' },
							{ name:'React', content:'react' },
							{ name:'Fluuter', content:'flutter' },
							{ name:'Java', content:'java' },
						],
						row:{ },
					}
				})
			} },
			{ label:'表格选择', 		name:'table', 	type:'table', data,
				config: {
					idStr:'value',
					height: 'auto', 		// 固定高
					cols: [
						{ title: '名称', 	dataIndex: 'label' },
						{ title: '内容', 	dataIndex: 'value' }
					],
					row:{  },
					pag: false
				}
			}
		],
		controls: {
			okText: '提交',
			after: [{ label:'后置按钮' }],
			before: [{ label:'前置按钮' }]
		}
	}
	/* ---------------------------  表格数据 --------------------------- */
	
	const tableConfig = {
		// idStr 		: 'id',					// 要选择的字段名
		api 		: 'visit',					// 列表接口
		// addApi 		: 'addApi', 				// 添加接口
		// modApi 		: 'modApi', 				// 编辑接口
		// delApi 		: 'delApi',					// 删除接口
		// infoApi 	: 'infoApi', 				// 回显接口
		// ctrApi 		: 'ctrApi',				// 增、删，改、查一个接口
		addConfig 	: addEditConfig,			// 
		paging 		: 0,						// 接口是否分页
		// pag 		: false,					// 是否显示分页
		cols,
		controls 	: {
			width: 400,
			// type: 'dropdown',
			// size: 'mini',
			data: (row, index) => [
				{ 
					mode:'mod', 					// 按钮模式
					config:addEditConfig, 			// 编辑配置
					api:'myModAapi', 				
					must:1,
					// backInfo: row,				// 回显编辑数据
					// abs:true, 					// 回显是否是必选参数
					// must:true,					// 提交是否有必选参数
					param: {x:1},					// 提交参数
					// backParam: {},				// 回显参数
					// idStr: 'uid',
				}, 
				{ mode:'delPop', label:'一般删除', abs:true, mul:1 },
				{ mode:'del', label:'弹窗删除', abs:true, mul:1 },
				{ mode:'formModal', label:'弹窗', abs:true, param: { id: row.id }, config:{
					title 		: '弹窗标题',
					width 		: '40%',
					labelWidth 	: 's5',
					api			: '/myapi',
					infoApi		: false,
					data		: [
						{ label:'Vue',  name:'title',	 r: 1},
						{ label:'React', name:'content' },
					]
				} },
				{ label:'表格弹窗', mode:'tableModal', backData: ['vue'], idStr:'uid', config:tableModalConfig },
			]
		},
		setRowClassName: ( record, index ) => {			// 自定义表格行颜色
			return index % 2 === 1 ? 'mycolor' : null
		},
		onInit:({ ref })=>{
			
		}
	}
</script>
<style>
	.mycolor{ background-color:#eee }
</style>